<template>
  <div class="schedule">
    <full-calendar
      :events="monthData"
      class="test-fc"
      first-day="1"
      locale="fr"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick"
    ></full-calendar>
  </div>
</template>
<script>
import FullCalendar from '../assets/vue-fullcalendar/fullCalendar'
export default {
  components: {
    'full-calendar': FullCalendar
  },
  data() {
    return {
      monthData: [
        {
          title: '飞行计划11', // 事件内容
          start: '2020-05-11', // 事件开始时间
          end: '2020-05-31', // 事件结束时间
          cssClass: 'red' // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
        },
        {
          title: 'sssss',
          start: '2020-05-25',
          end: '2020-05-31',
          cssClass: 'blue'
        },
        {
          title: 'dddddddd',
          start: '2020-05-09',
          end: '2020-05-09',
          cssClass: 'blue'
        },
        {
          title: 'cccccc',
          start: '2020-05-20',
          end: '2020-05-31',
          cssClass: 'red'
        },
        {
          title: 'aaaaaa',
          start: '2020-05-01',
          end: '2020-05-30',
          cssClass: 'red'
        },
        {
          title: 'bbbbbb',
          start: '2020-05-05',
          end: '2020-05-10',
          cssClass: 'blue'
        }
      ],
      value: new Date(),
      calendarData: [
        { id: 0, months: ['05', '09', '11'], days: ['15'], things: 'xxx飞行计划' },
        { id: 1, months: ['10', '11'], days: ['02'], things: 'xxx飞行计划2' },
        { id: 2, months: ['11'], days: ['02'], things: 'xxx飞行计划星星3' },
        { id: 3, months: ['11'], days: ['02'], things: 'xxx飞行计划4' }
      ],
      dateCellShow: false,
      event: [{ name: '标签一' }, { name: '标签二' }, { name: '标签三' }]
    }
  },
  computed: {
    displayDetails() {
      return this.dateCellShow ? this.event : this.event.slice(0, 2)
    }
  },
  methods: {
    // 选择月份
    changeMonth(start, end, current) {
      //   console.log('changeMonth222', start.format(), end, current)
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {
      //   console.log('eventClick', event, jsEvent, pos)
    },
    // 点击当天
    dayClick(day, jsEvent) {
      //   console.log('dayClick', day, jsEvent)
    },
    // 查看更多
    moreClick(day, events, jsEvent) {
      //   console.log('moreCLick', day, events, jsEvent)
    },
    open() {
      this.dateCellShow = true
    },
    saveEvent() {
      const _form = this.form
      SaveCalendar(_form).then(result => {
        if (result.status.result === true) {
          if (this.form.id === undefined || this.form.id === '') {
            // 新增
            this.$message({
              message: '新增成功！',
              type: 'success'
            })
          } else {
            // 修改
            this.$message({
              message: '修改成功！',
              type: 'success'
            })
          }
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message({
            message: result.message + '失败',
            type: 'error'
          })
        }
      })
    },
    delEvent() {
      const _form = this.form
      //   SaveCalendar(_form).then(result => {
      //     // SaveCalendar(_form)后台存数据
      //     if (result.status.result === true) {
      //       this.load()
      //       this.dialogFormVisible = false
      //       this.$message({
      //         message: '删除成功！',
      //         type: 'success'
      //       })

      //       // location.reload()
      //     } else {
      //       this.$message({
      //         message: result.message + '删除失败',
      //         type: 'error'
      //       })
      //     }
      //   })
    },
    handleAddClick(date) {
      this.dialogFormVisible = true
      this.optTitle = '新增事件'
      this.form.id = ''
      // 加入需要在弹窗新增的
    },
    handleEventClick(info) {
      //   this.dialogFormVisible = true
      this.optTitle = '修改事件'
      const params = {
        id: info
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.schedule {
  color: #000;
  .dateCell {
    width: 200px;
    height: 50px;
  }
  .dateCellShow {
    position: relative;
  }
}
</style>
